<template>
  <view class="container">
    <!-- 顶部功德计数 -->
    <view class="merit-counter">
      <text class="merit-text">功德: {{ meritCount }}</text>
      <text class="merit-subtitle">今日已积 {{ todayMerit }} 功德</text>
    </view>

    <!-- 木鱼区域 -->
    <view class="fish-container" @click="knockFish">
      <view class="fish" :class="{ 'knock-animation': isKnocking }">
        <image class="fish-image" src="/static/images/fish.png" mode="aspectFit"></image>
      </view>

      <!-- 锤子 -->
      <view class="mallet" :class="{ 'mallet-knock': isKnocking }">
        <image class="mallet-image" src="/static/images/mallet.png" mode="aspectFit"></image>
      </view>

      <!-- 点击提示 -->
      <view class="hint-text">点击木鱼积功德</view>
    </view>

    <!-- 底部控制区域 -->
    <view class="control-panel">
      <button class="control-btn" @click="resetMerit">重置功德</button>
      <button class="control-btn" @click="toggleSound">
        {{ soundEnabled ? '关闭音效' : '开启音效' }}
      </button>
      <button class="control-btn" @click="autoKnock" :disabled="isAutoKnocking">
        {{ isAutoKnocking ? `自动敲击中(${autoCount})` : '自动敲击' }}
      </button>
    </view>

    <!-- 功德记录 -->
    <view class="merit-record">
      <text class="record-title">功德记录</text>
      <scroll-view class="record-list" scroll-y>
        <view class="record-item" v-for="(record, index) in meritRecords" :key="index">
          <text class="record-time">{{ record.time }}</text>
          <text class="record-merit">+{{ record.merit }} 功德</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      meritCount: 0,
      todayMerit: 0,
      isKnocking: false,
      soundEnabled: true,
      isAutoKnocking: false,
      autoTimer: null,
      autoCount: 0,
      meritRecords: [],
      audioContext: null
    }
  },
  onLoad() {
    // 加载本地存储的功德数据
    this.loadMeritData();
    // 创建音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = '/static/audio/knock.mp3';
  },
  onUnload() {
    // 清除自动敲击定时器
    if (this.autoTimer) {
      clearInterval(this.autoTimer);
    }
    // 销毁音频上下文
    if (this.audioContext) {
      this.audioContext.destroy();
    }
  },
  methods: {
    // 敲击木鱼
    knockFish() {
      if (this.isKnocking) return;

      this.isKnocking = true;

      // 播放音效
      if (this.soundEnabled) {
        this.playKnockSound();
      }

      // 震动反馈
      uni.vibrateShort({
        success: () => {
          console.log('震动成功');
        }
      });

      // 增加功德
      this.meritCount += 1;
      this.todayMerit += 1;

      // 记录功德
      this.recordMerit();

      // 保存数据
      this.saveMeritData();

      // 重置动画
      setTimeout(() => {
        this.isKnocking = false;
      }, 300);
    },

    // 播放敲击音效
    playKnockSound() {
      if (this.audioContext) {
        this.audioContext.seek(0);
        this.audioContext.play();
      }
    },

    // 记录功德
    recordMerit() {
      const now = new Date();
      const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;

      this.meritRecords.unshift({
        time: time,
        merit: 1
      });

      // 只保留最近20条记录
      if (this.meritRecords.length > 20) {
        this.meritRecords = this.meritRecords.slice(0, 20);
      }
    },

    // 重置功德
    resetMerit() {
      uni.showModal({
        title: '重置功德',
        content: '确定要重置所有功德吗？此操作不可撤销。',
        success: (res) => {
          if (res.confirm) {
            this.meritCount = 0;
            this.todayMerit = 0;
            this.meritRecords = [];
            this.saveMeritData();
            uni.showToast({
              title: '功德已重置',
              icon: 'success'
            });
          }
        }
      });
    },

    // 切换音效
    toggleSound() {
      this.soundEnabled = !this.soundEnabled;
      uni.showToast({
        title: this.soundEnabled ? '音效已开启' : '音效已关闭',
        icon: 'none'
      });
    },

    // 自动敲击
    autoKnock() {
      if (this.isAutoKnocking) {
        this.stopAutoKnock();
      } else {
        this.startAutoKnock();
      }
    },

    // 开始自动敲击
    startAutoKnock() {
      this.isAutoKnocking = true;
      this.autoCount = 0;

      this.autoTimer = setInterval(() => {
        if (!this.isKnocking) {
          this.knockFish();
          this.autoCount++;

          // 自动敲击100次后停止
          if (this.autoCount >= 100) {
            this.stopAutoKnock();
            uni.showToast({
              title: '自动敲击完成',
              icon: 'success'
            });
          }
        }
      }, 500);
    },

    // 停止自动敲击
    stopAutoKnock() {
      if (this.autoTimer) {
        clearInterval(this.autoTimer);
        this.autoTimer = null;
      }
      this.isAutoKnocking = false;
      this.autoCount = 0;
    },

    // 加载功德数据
    loadMeritData() {
      try {
        const meritData = uni.getStorageSync('meritData');
        if (meritData) {
          const data = JSON.parse(meritData);
          this.meritCount = data.meritCount || 0;
          this.todayMerit = data.todayMerit || 0;
          this.meritRecords = data.meritRecords || [];
        }
      } catch (e) {
        console.error('加载功德数据失败:', e);
      }
    },

    // 保存功德数据
    saveMeritData() {
      try {
        const data = {
          meritCount: this.meritCount,
          todayMerit: this.todayMerit,
          meritRecords: this.meritRecords
        };
        uni.setStorageSync('meritData', JSON.stringify(data));
      } catch (e) {
        console.error('保存功德数据失败:', e);
      }
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 40rpx 30rpx;
  color: #FFF;
}

.merit-counter {
  text-align: center;
  margin-bottom: 60rpx;
}

.merit-text {
  display: block;
  font-size: 60rpx;
  font-weight: bold;
  color: #FFD700;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

.merit-subtitle {
  display: block;
  font-size: 28rpx;
  color: #FFEBCD;
  margin-top: 10rpx;
}

.fish-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.fish {
  width: 400rpx;
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.1s;
}

.fish-image {
  width: 100%;
  height: 100%;
  filter: drop-shadow(10rpx 10rpx 20rpx rgba(0, 0, 0, 0.5));
}

.knock-animation {
  animation: knock 0.3s ease;
}

@keyframes knock {
  0% { transform: scale(1); }
  50% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.mallet {
  position: absolute;
  top: -80rpx;
  right: 60rpx;
  width: 120rpx;
  height: 120rpx;
  transform-origin: bottom center;
  transition: transform 0.3s;
}

.mallet-image {
  width: 100%;
  height: 100%;
}

.mallet-knock {
  animation: malletKnock 0.3s ease;
}

@keyframes malletKnock {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-30deg); }
  100% { transform: rotate(0deg); }
}

.hint-text {
  margin-top: 40rpx;
  font-size: 32rpx;
  color: #FFEBCD;
  text-align: center;
}

.control-panel {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 40rpx;
}

.control-btn {
  background: rgba(139, 69, 19, 0.8);
  color: #FFF;
  border: 2rpx solid #FFD700;
  border-radius: 50rpx;
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  min-width: 180rpx;
}

.control-btn:disabled {
  opacity: 0.6;
}

.merit-record {
  width: 100%;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 20rpx;
  padding: 30rpx;
  box-sizing: border-box;
}

.record-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #FFD700;
  margin-bottom: 20rpx;
  text-align: center;
}

.record-list {
  max-height: 400rpx;
}

.record-item {
  display: flex;
  justify-content: space-between;
  padding: 15rpx 0;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}

.record-time {
  font-size: 28rpx;
  color: #FFEBCD;
}

.record-merit {
  font-size: 28rpx;
  color: #FFD700;
  font-weight: bold;
}
</style>